<template>
    <view>
        <!-- <uni-popup :safe-area="false" style="position: absolute;width:100%;height:100%;z-index: 9999;" ref="popup" -->
        <uni-popup
            :safe-area="false"
            ref="popup"
            type="bottom"
            background-color="rgba(0,0,0,0)"
            @maskClick="changedata"
            style="position: relative; z-index: 9991"
        >
            <view class="popupBox">
                <view class="popup-title">
                    <view>
                        {{ text }}
                        <text v-show="text == '冲稳保'" style="font-size: 24rpx; color: #999">(单选)</text>
                    </view>
                    <image
                        src="https://mcdn.chatgk.com/xcx/static/images/chancePageImg/gb.png"
                        mode=""
                        @tap.stop="close"
                    ></image>
                </view>
                <view
                    :id="item"
                    class="popup-select"
                    v-for="(item, index) in arrays"
                    :key="index"
                    @tap.stop="qiehuanxueli(item, index)"
                >
                    <view class="popup-select-xueli">
                        {{ item }}
                    </view>
                    <view class="popup-select-tips">
                        <!-- <image v-if="String(item).includes(select) " src="https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_s.png"
							mode=""></image> -->
                        <image
                            v-if="item == select"
                            src="https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_s.png"
                            mode=""
                        ></image>
                        <image
                            v-else
                            src="https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_n.png"
                            mode=""
                        ></image>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    name: 'new-popup',
    // text 弹框标题  arrays 渲染的数组  open 开关  select 需要匹配选中的文字 data需要附带的副属性 getbackData回传选中的数值 opensub重置属性
    props: {
        text: {
            type: String,
            default: ''
        },
        arrays: {
            type: Array,
            default: () => []
        },
        open: {
            type: Boolean,
            default: false
        },
        select: {
            type: String,
            default: ''
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    computed: {},
    data() {
        return {};
    },
    methods: {
        close() {
            this.$refs.popup.close();
            this.$emit('opensubs');
        },

        changedata() {
            this.$emit('opensubs');
        },
        // open(){
        //        this.$refs.popup.open('top')
        //      },
        //这里回传选中的数值
        qiehuanxueli(item, index) {
            const datas = {
                item: item,
                index: index,
                value: this.data[index] ? this.data[index] : []
            };
            this.$emit('getbackData', datas);
            this.$refs.popup.close();
        }
    },
    watch: {
        open: {
            handler(newval) {
                if (newval) {
                    this.$refs.popup.open('bottom');
                }
            }
            // deep:true,
            // immediate:true
        }
    }
};
</script>

<style lang="scss" scoped>
.popup-title {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #000;
    padding: 32rpx;
    box-sizing: border-box;

    image {
        width: 60rpx;
        height: 60rpx;
    }
}

.popupBox {
    width: 100vw;
    border-radius: 20rpx;
    position: fixed;
    bottom: 0;
    background: #fff;
    overflow: hidden;
    padding-bottom: 50rpx;
    padding-top: 20rpx;
    z-index: 9991;
}

.popup-select {
    height: 80rpx;
    width: 96%;
    font-size: 30rpx;
    margin: 0 auto;
    font-weight: 300;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #f0f0f0;
    padding: 0 32rpx;
    box-sizing: border-box;

    &:last-child {
        border-bottom: none;
    }

    image {
        width: 40rpx;
        height: 40rpx;
    }
}
</style>
